<!--
 * @Author: Christion.Young
 * @Date: 2020-11-04 19:42:25
 * @LastEditors: zhangjingyu
 * @LastEditTime: 2020-12-30 18:58:25
 * @holidayName: 日历管理
-->
<template>
    <div class="dataAssociationVC">
        <el-row>
            <el-col :span="18">
                <!-- 操作区域 -->
                <upper-template :searchIcon="false">
                    <!-- 操作按钮区 -->
                    <template slot="buttonArea">
                        <el-button @click="addFunc">新增</el-button>
                        <el-button @click="editFunc">编辑</el-button>
                        <el-button @click="delFunc">删除</el-button>
                    </template>
                    <!-- 显示隐藏区 -->
                    <template slot="columnHide">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox v-for="item in textData"
                                         :label="item.label"
                                         :key="item.prop">{{ item.label }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </template>
                </upper-template>
                <!-- 列表 -->
                <el-table ref="multipleTable"
                          :data="tableData"
                          stripe
                          @row-click="authorizeFor">
                    <el-table-column width="55"
                                     type="selection"
                                     ></el-table-column>
                    <el-table-column prop="holidayId"
                                     label="日历编号"
                                     v-if="columnState[0]">
                    </el-table-column>
                    <el-table-column prop="holidayName"
                                     label="日历名称"
                                     show-overflow-tooltip
                                     v-if="columnState[1]">
                    </el-table-column>
                    <el-table-column prop="mondayFlag"
                                     label="星期一"
                                     :formatter="row => (row.mondayFlag == '1' ? '工作日' : '休息日')"
                                     v-if="columnState[2]">
                    </el-table-column>
                    <el-table-column prop="tuesdayFlag"
                                     label="星期二"
                                     :formatter="row => (row.tuesdayFlag == '1' ? '工作日' : '休息日')"
                                     v-if="columnState[3]">
                    </el-table-column>
                    <el-table-column prop="wednesdayFlag"
                                     label="星期三"
                                     :formatter="row => (row.wednesdayFlag == '1' ? '工作日' : '休息日')"
                                     v-if="columnState[4]">
                    </el-table-column>
                    <el-table-column prop="thursdayFlag"
                                     label="星期四"
                                     :formatter="row => (row.thursdayFlag == '1' ? '工作日' : '休息日')"
                                     v-if="columnState[5]">
                    </el-table-column>
                    <el-table-column prop="fridayFlag"
                                     label="星期五"
                                     :formatter="row => (row.fridayFlag == '1' ? '工作日' : '休息日')"
                                     v-if="columnState[6]">
                    </el-table-column>
                    <el-table-column prop="saturdayFlag"
                                     label="星期六"
                                     :formatter="row => (row.saturdayFlag == '1' ? '工作日' : '休息日')"
                                     v-if="columnState[7]">
                    </el-table-column>
                    <el-table-column prop="sundayFlag"
                                     label="星期日"
                                     :formatter="row => (row.sundayFlag == '1' ? '工作日' : '休息日')"
                                     v-if="columnState[8]">
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="6"
                    style="padding-left:10px;">
                <div style="display:flex;justify-content:end;height:32px;margin-bottom:10px;">
                    <!-- 左侧按钮 -->
                    <div class="btnmini"
                         @click="offsideAppend">新增</div>
                    <div class="btnmini"
                         @click="offsideCancel">取消</div>
                    <div class="btnmini"
                         @click="offsideSave">保存</div>
                    <div class="btnmini"
                         @click="offsideDelete">删除</div>
                </div>
                <!-- 列表 -->
                <el-table ref="offsideMultipleTable"
                          :data="offsideTableData"
                          stripe
                          @row-click="offsideAuthorizeFor">
                    <el-table-column width="55"
                                     type="selection"
                                     ></el-table-column>
                    <el-table-column prop="calendarDate"
                                     style="width:220px;"
                                     label="日期">
                        <template slot-scope="scope">
                            <div v-if="scope.row.saveData == '编辑'">
                                <el-date-picker v-model="scope.row.calendarDate"
                                                type="date"
                                                style="width:160px;"
                                                value-format="yyyy-MM-dd"
                                                placeholder="">
                                </el-date-picker>
                            </div>
                            <div v-if="scope.row.saveData == '新增'">
                                <el-date-picker v-model="offsideSaveData.calendarDate"
                                                type="date"
                                                style="width:160px;"
                                                value-format="yyyy-MM-dd"
                                                placeholder="">
                                </el-date-picker>
                            </div>
                            <div v-if="!scope.row.saveData">
                                {{ setCalendarDate(scope.row.calendarDate) }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="flag"
                                     label="类型">
                        <template slot-scope="scope">
                            <div v-if="scope.row.saveData == '编辑'">
                                <el-select v-model="scope.row.flag"
                                           placeholder="请选择">
                                    <el-option v-for="item in offsideSaveOptions"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div v-if="scope.row.saveData == '新增'">
                                <el-select v-model="offsideSaveData.flag"
                                           placeholder="请选择">
                                    <el-option v-for="item in offsideSaveOptions"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div v-if="!scope.row.saveData">
                                {{ setFlagDate(scope.row.flag) }}
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <!-- 新增/编辑 -->
        <el-dialog v-dialogDrag
                   :title="saveTitles[saveFlg - 1] + '日历版本'"
                   :visible.sync="addOrEdit"
                   width="560px"
                   top="5%">
            <el-form :model="saveForm"
                     ref="addTreeForm"
                     label-width="200px"
                     label-position="right"
                     :rules="saveFormRules">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="日历编号:"
                                      style="width:500px;"
                                      prop="holidayId">
                            <el-input v-model="saveForm.holidayId"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="日历名称:"
                                      style="width:500px;"
                                      prop="holidayName">
                            <el-input v-model="saveForm.holidayName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item>
                            <el-checkbox v-model="calendarData.mondayFlag">星期一</el-checkbox>
                            <el-checkbox v-model="calendarData.tuesdayFlag">星期二</el-checkbox>
                            <el-checkbox v-model="calendarData.wednesdayFlag">星期三</el-checkbox>
                            <el-checkbox v-model="calendarData.thursdayFlag">星期四</el-checkbox>
                            <el-checkbox v-model="calendarData.fridayFlag">星期五</el-checkbox>
                            <el-checkbox v-model="calendarData.saturdayFlag">星期六</el-checkbox>
                            <el-checkbox v-model="calendarData.sundayFlag">星期日</el-checkbox>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button @click="confirmTne">确 定</el-button>
                <el-button @click="cancelTne">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { publicManage_dat } from '@/api/index'
export default {
    data() {
        return {
            //左侧   ##############################################################################################################
            checkList: [
                '日历编号',
                '日历名称',
                '星期一',
                '星期二',
                '星期三',
                '星期四',
                '星期五',
                '星期六',
                '星期日',
            ],
            textData: [
                { prop: 'holidayId', label: '日历编号' },
                { prop: 'holidayName', label: '日历名称' },
                { prop: 'mondayFlag', label: '星期一' },
                { prop: 'tuesdayFlag', label: '星期二' },
                { prop: 'wednesdayFlag', label: '星期三' },
                { prop: 'thursdayFlag', label: '星期四' },
                { prop: 'fridayFlag', label: '星期五' },
                { prop: 'saturdayFlag', label: '星期六' },
                { prop: 'sundayFlag', label: '星期日' },
            ],
            addOrEdit: false,
            saveFlg: 1,
            saveTitles: ['新增', '编辑'],
            saveForm: {
                holidayId: '',
                holidayName: '',
                mondayFlag: '',
                tuesdayFlag: '',
                wednesdayFlag: '',
                thursdayFlag: '',
                fridayFlag: '',
                saturdayFlag: '',
                sundayFlag: '',
            },
            saveFormRules: {
                holidayId: [
                    {
                        required: true,
                        message: '该输入项为必输项',
                        trigger: 'blur',
                    },
                    {
                        pattern: /^[A-Za-z0-9_]{1,40}$/,
                        message: '只能输入1-40位的英文字母、数字、下划线',
                        trigger: 'blur',
                    },
                    { validator: this.holidayIdValid, trigger: 'blur' },
                ],
                holidayName: [
                    {
                        required: true,
                        message: '该输入项为必输项',
                        trigger: 'blur',
                    },
                    {
                        pattern: /^[\u4E00-\u9FA5A-Za-z0-9_]{1,40}$/,
                        message: '只能输入1-40位的汉字、英文字母、数字、下划线',
                        trigger: 'blur',
                    },
                ],
            },
            //多选日历数据
            calendarData: {
                mondayFlag: false,
                tuesdayFlag: false,
                wednesdayFlag: false,
                thursdayFlag: false,
                fridayFlag: false,
                saturdayFlag: false,
                sundayFlag: false,
            },
            tableData: [],
            //右侧   ##############################################################################################################
            //列表
            offsideTableData: [],
            //新增数据
            offsideSaveData: {
                holidayId: '',
                calendarDate: '',
                flag: '',
                saveData: '新增',
            },
            //下拉列表
            offsideSaveOptions: [
                {
                    value: '1',
                    label: '工作日',
                },
                {
                    value: '2',
                    label: '休息日',
                },
            ],
        }
    },
    created() {
        this.searchFunc()
    },
    computed: {
        columnState() {
            let arr = [],
                arr1 = this.textData,
                arr2 = this.checkList
            for (let i = 0; i < arr1.length; i++) {
                let flg = false
                for (let j = 0; j < arr2.length; j++) {
                    if (arr1[i].label === arr2[j]) {
                        flg = true
                    }
                }
                arr.push(flg)
            }
            return arr
        },
    },
    mounted() {},
    watch: {
        addOrEdit() {
            // 窗口打开或关闭清除校验结果
            if (this.$refs.addTreeForm) {
                this.$refs.addTreeForm.clearValidate()
            }
        },
    },
    methods: {
        //左侧   ##############################################################################################################
        // 校验日历编号是否唯一
        holidayIdValid(rule, value, callback) {
            // 只在新增校验
            if (this.saveFlg != 1) {
                callback()
                return
            }
            publicManage_dat.holidayCheckCode({ id: value }).then((res) => {
                if (res.code == 200 && res.success) {
                    callback(new Error('编号已存在'))
                } else {
                    callback()
                }
            })
        },
        //新增
        addFunc() {
            this.saveFlg = 1
            for (let k in this.saveForm) {
                this.saveForm[k] = ''
            }
            this.calendarData = {
                mondayFlag: false,
                tuesdayFlag: false,
                wednesdayFlag: false,
                thursdayFlag: false,
                fridayFlag: false,
                saturdayFlag: false,
                sundayFlag: false,
            }
            this.addOrEdit = true
        },
        //编辑
        editFunc() {
            this.saveFlg = 2
            let selection = this.$refs.multipleTable.selection
            if (selection.length != 1) {
                return this.$message.warning('请选择一条数据进行修改')
            }
            let row = selection[0]
            let form = { ...row }
            this.calendarData = {
                mondayFlag: this.dataTreating('数字转布尔', form.mondayFlag),
                tuesdayFlag: this.dataTreating('数字转布尔', form.tuesdayFlag),
                wednesdayFlag: this.dataTreating(
                    '数字转布尔',
                    form.wednesdayFlag
                ),
                thursdayFlag: this.dataTreating(
                    '数字转布尔',
                    form.thursdayFlag
                ),
                fridayFlag: this.dataTreating('数字转布尔', form.fridayFlag),
                saturdayFlag: this.dataTreating(
                    '数字转布尔',
                    form.saturdayFlag
                ),
                sundayFlag: this.dataTreating('数字转布尔', form.sundayFlag),
            }
            this.saveForm = form
            this.addOrEdit = true
        },
        //删除
        delFunc() {
            let selection = this.$refs.multipleTable.selection
            if (selection.length < 1) {
                return this.$message.warning('请选择要删除的数据')
            }
            this.$confirm('您确定要删除选中数据吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    const paramData = []
                    selection.forEach((element) => {
                        paramData.push(element.holidayId)
                    })
                    publicManage_dat
                        .holidayRemove({ ids: paramData })
                        .then((res) => {
                            if (res.code == 200) {
                                this.$message.success('成功删除！')
                                this.searchFunc()
                                this.offsideTableData = []
                            } else {
                                this.$message.error(res.message)
                            }
                        })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                })
        },
        //多选星期数据处理
        dataTreating(type, val) {
            if (type === '布尔转数字') {
                if (val === false) {
                    return '1'
                } else {
                    return '2'
                }
            } else if (type === '数字转布尔') {
                if (val === '1') {
                    return false
                } else {
                    return true
                }
            }
        },
        //新增编辑-确定
        confirmTne() {
            this.saveForm.mondayFlag = this.dataTreating(
                '布尔转数字',
                this.calendarData.mondayFlag
            )
            this.saveForm.tuesdayFlag = this.dataTreating(
                '布尔转数字',
                this.calendarData.tuesdayFlag
            )
            this.saveForm.wednesdayFlag = this.dataTreating(
                '布尔转数字',
                this.calendarData.wednesdayFlag
            )
            this.saveForm.thursdayFlag = this.dataTreating(
                '布尔转数字',
                this.calendarData.thursdayFlag
            )
            this.saveForm.fridayFlag = this.dataTreating(
                '布尔转数字',
                this.calendarData.fridayFlag
            )
            this.saveForm.saturdayFlag = this.dataTreating(
                '布尔转数字',
                this.calendarData.saturdayFlag
            )
            this.saveForm.sundayFlag = this.dataTreating(
                '布尔转数字',
                this.calendarData.sundayFlag
            )
            this.$refs.addTreeForm.validate((valid) => {
                if (valid) {
                    publicManage_dat.holidaySave(this.saveForm).then((res) => {
                        if (res.code == 200) {
                            this.$message.success('保存成功')
                            this.searchFunc()
                            this.addOrEdit = false
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                }
            })
        },
        //新增编辑-取消
        cancelTne() {
            this.addOrEdit = false
        },
        //点击行选中
        authorizeFor(row) {
            if (this.$refs.multipleTable) {
                this.$refs.multipleTable.clearSelection()
            }
            this.$refs.multipleTable.toggleRowSelection(row, true)
            this.offsideSearchFunc()
        },

        //查询
        searchFunc() {
            publicManage_dat.queryAllForList().then((res) => {
                if (res.code == 200) {
                    this.tableData = res.datas
                    this.$nextTick(() => {
                        if (this.tableData.length > 0) {
                            this.authorizeFor(this.tableData[0])
                        }
                    })
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        //右侧   ##############################################################################################################
        //新增
        offsideAppend() {
            this.offsideSaveData = {
                holidayId: '',
                calendarDate: '',
                flag: '',
            }
            if (this.tableData.length !== 0) {
                let arr = []
                arr = this.offsideTableData.filter((item) => {
                    return item.saveData == '新增' || item.saveData == '编辑'
                })
                if (arr.length == 0) {
                    this.offsideTableData.push({
                        holidayId: '',
                        calendarDate: '',
                        flag: '',
                        saveData: '新增',
                    })
                } else {
                    this.$message({
                        message: '当前有正在编辑！',
                        type: 'warning',
                    })
                }
            } else {
                this.$message({
                    message: '请先添加日历数据！',
                    type: 'warning',
                })
            }
        },
        //取消
        offsideCancel() {
            if (this.tableData.length !== 0) {
                let arr = []
                arr = this.offsideTableData.filter((item) => {
                    return item.saveData == '新增' || item.saveData == '编辑'
                })
                if (arr.length == 0) {
                    this.$message({
                        message: '当前无正在编辑！',
                        type: 'warning',
                    })
                } else {
                    this.offsideSearchFunc()
                }
                this.offsideSaveData = {
                    holidayId: '',
                    calendarDate: '',
                    flag: '',
                }
            } else {
                this.$message({
                    message: '请先添加日历数据！',
                    type: 'warning',
                })
            }
        },
        //保存
        offsideSave() {
            if (this.tableData.length !== 0) {
                let selection = this.$refs.multipleTable.selection
                let arr = []
                arr = this.offsideTableData.filter((item) => {
                    return item.saveData == '新增' || item.saveData == '编辑'
                })
                if (arr.length == 0) {
                    this.$message({
                        message: '当前无正在编辑！',
                        type: 'warning',
                    })
                } else {
                    let arrA = []
                    arrA = this.offsideTableData.filter((item) => {
                        return item.saveData == '新增'
                    })
                    if (arrA.length == 0) {
                        let selection = this.$refs.offsideMultipleTable
                            .selection
                        let data = selection[0]
                        console.log(data, 'datadatadata')
                        if (data.flag != '' && data.calendarDate != '') {
                            publicManage_dat
                                .holidayDaySave(data)
                                .then((res) => {
                                    if (res.code == 200) {
                                        this.$message({
                                            message: '保存成功！',
                                            type: 'success',
                                        })
                                        this.offsideSearchFunc()
                                    } else {
                                        this.$message.error(res.message)
                                        this.offsideSearchFunc()
                                    }
                                })
                        } else {
                            this.$message({
                                message: '请先输入日历数据！',
                                type: 'warning',
                            })
                        }
                    } else {
                        let data = {
                            flag: this.offsideSaveData.flag,
                            holidayId: selection[0].holidayId,
                            calendarDate: this.offsideSaveData.calendarDate,
                        }
                        if (data.flag != '' && data.calendarDate != '') {
                            publicManage_dat
                                .holidayDaySave(data)
                                .then((res) => {
                                    if (res.code == 200) {
                                        this.$message({
                                            message: '保存成功！',
                                            type: 'success',
                                        })
                                        this.offsideSearchFunc()
                                    } else {
                                        this.$message.error(res.message)
                                        this.offsideSearchFunc()
                                    }
                                })
                        } else {
                            this.$message({
                                message: '请先输入日历数据！',
                                type: 'warning',
                            })
                        }
                    }
                }
            } else {
                this.$message({
                    message: '请先添加日历数据！',
                    type: 'warning',
                })
            }
        },
        //删除
        offsideDelete() {
            let selection = this.$refs.offsideMultipleTable.selection
            if (selection.length < 1) {
                return this.$message.warning('请选择要删除的数据！')
            }
            const paramData = []
            let isAdd = false
            selection.forEach((element) => {
                if (element.holidayDayId == undefined) {
                    isAdd = true
                } else {
                    paramData.push(element.holidayDayId)
                }
            })
            if (!isAdd) {
                this.$confirm('您确定要删除选中数据吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        publicManage_dat
                            .holidayDayRemove({ ids: paramData })
                            .then((res) => {
                                if (res.code == 200) {
                                    this.$message.success('成功删除！')
                                    this.offsideSearchFunc()
                                } else {
                                    this.$message.error(res.message)
                                }
                            })
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除',
                        })
                    })
            } else {
                return this.$message.warning('请先编辑新增项！')
            }
        },
        //点击行选中
        offsideAuthorizeFor(row) {
            if (this.$refs.offsideMultipleTable) {
                this.$refs.offsideMultipleTable.clearSelection()
            }
            this.$refs.offsideMultipleTable.toggleRowSelection(row, true)
            let selection = this.$refs.offsideMultipleTable.selection
            let arr = []
            arr = this.offsideTableData.filter((item) => {
                return item.saveData == '新增' || item.saveData == '编辑'
            })
            if (arr.length == 0) {
                this.offsideTableData.forEach((element, index) => {
                    if (element.holidayDayId == selection[0].holidayDayId) {
                        this.offsideTableData[index].saveData = '编辑'
                    }
                })
            }
        },

        //查询
        offsideSearchFunc() {
            let selection = this.$refs.multipleTable.selection
            publicManage_dat
                .queryHolidayDayByHolidayId({ id: selection[0].holidayId })
                .then((res) => {
                    if (res.code == 200) {
                        this.offsideTableData = res.datas
                    } else {
                        this.$message.error(res.message)
                    }
                })
        },
        //日期数据处理
        setCalendarDate(val) {
            if (val) {
                let arr = []
                arr = val.slice(0, 10)
                return arr
            } else {
                return '-'
            }
        },
        //类型数据处理
        setFlagDate(val) {
            if (val) {
                let arr = this.offsideSaveOptions.filter((item) => {
                    return item.value == val
                })
                return arr[0].label
            } else {
                return '-'
            }
        },
    },
}
</script>
<style lang="scss" scoped>
.btnmini {
    margin-right: 10px;
    min-width: 50px;
    min-height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #d5dced;
    color: #415378;
    background: linear-gradient(159deg, #f5f8ff 0%, #e8efff 100%);
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
}
</style>